<template>
	<view class="container">
		<x-navigation-bar title="我的二维码" isBack="true"></x-navigation-bar>
		<view class="x-page-border-top"></view>

		<view class="content" :style="{height: device.windowHeight+'px'}">
			<x-image class="x-image qrcode" :src="userInfo.partnerQRCode"></x-image>
			<view class="user-name">{{ userInfo.nickName }}</view>
			<view class="tip">扫一扫二维码，加我为好友～</view>

			<!-- 功能菜单 -->
			<view class="function-btn">
				<view class="share" @click="onWXShare">
					<view class="image">
						<u-icon name="chat-fill" color="#00AA00" size="60"></u-icon>
					</view>
					<view class="text">微信分享</view>
				</view>
				<view class="album" @click="onDownloadQRCodeToAlbum">
					<view class="image">
						<u-icon name="download" color="#000" size="60"></u-icon>
					</view>

					<view class="text">下载到相册</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import XNavigationBar from '@/components/navigationBar/xNavigationBar.vue'
	import XImage from '@/components/image/xImage.vue'
	
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['device', 'userInfo'])
		},
		components: {
			XNavigationBar,
			XImage,
		},
		methods: {
			onWXShare() {
				console.log("onWXShare")				
				uni.downloadFile({
					url: this.userInfo.partnerQRCode,
					success: (res)=>{
						uni.showShareImageMenu({
							path: res.tempFilePath
						})
					}
				})
				
			},
			onDownloadQRCodeToAlbum() {
				console.log("onDownloadQRCodeToAlbum")
				this.$TOOLS.UTIL.saveImage(this.userInfo.partnerQRCode);
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: $x-content-background;

			.x-image,
			.qrcode {
				margin-top: 80rpx;
				width: 300rpx;
				height: 300rpx;
				border: none;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)
			}

			.user-name {
				margin-top: 40rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: $x-theme-color;
			}

			.tip {
				margin-top: 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: $x-theme-color;
			}

			.function-btn {
				position: absolute;
				bottom: 20%;

				display: flex;
				justify-content: center;

				.share {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 200rpx;

					.image {
						position: relative;
						width: 120rpx;
						height: 120rpx;
						border-radius: 60rpx;
						background-color: #EFEFEF;
						box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
					}


					.text {
						margin-top: 30rpx;
					}
				}

				.album {
					display: flex;
					flex-direction: column;
					align-items: center;


					.image {
						position: relative;
						width: 120rpx;
						height: 120rpx;
						border-radius: 60rpx;
						background-color: #EFEFEF;
						box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
					}

					.text {
						margin-top: 30rpx;
					}
				}
			}
		}
	}
</style>